<!-- https://blog.csdn.net/qq_52013792/article/details/126139478 -->
<template>
  <div id="threeBox" ref="threeBox" @click="modelClick" class="threeBox"></div>
</template>
<script lang='ts' setup>
import { ref, onMounted } from "vue";
import { Init } from "./init";
import * as THREE from "three";
// 创建容器
const threeBox = ref<any>(null);
const createdModel = new Init(threeBox, "box");
const loop = () => {
  requestAnimationFrame(loop);
  createdModel.renderer.render(createdModel.scene, createdModel.camera);
  createdModel.controls.autoRotate = true;
  createdModel.controls.update();
};
onMounted(() => {
  createdModel.init();
  loop();
});
const modelClick = (event: any) => {
  event.preventDefault();
  let raycaster = new THREE.Raycaster();
  let mouse = new THREE.Vector2();
  mouse.x =
    (event.offsetX / createdModel.renderer.domElement.clientWidth) * 2 - 1;
  mouse.y =
    -(event.offsetY / createdModel.renderer.domElement.clientHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, createdModel.camera);
  let intersects = raycaster.intersectObjects(
    createdModel.scene.children,
    true
  );
  if (intersects.length > 0) {
    if (intersects[0].object.name == "car") {
      console.log("-");
      intersects[0].object["material"].color.setStyle("#ca14cb");
    }
    // .material.color.setStyle("#ca14cb");
    //
    // ;
  }
};

//
</script>
<style lang='less'>
.threeBox {
  width: 100%;
  height: 100%;
}
</style>